<template>
  <layout
    fixed-navbar
    fixed-filter>
    <exhibition-list-navbar>全部展会</exhibition-list-navbar>
    <exhibition-list-filter
      :result="search ? '“' + search + '” 共' + total + '个结果' : ''"
      :options="exhibitionListFilterOptions"
      @selected="filterSelected"/>
    <div class="mp-16">
      <exhibition-list-filter-tags v-model="filterTags"/>
      <van-list
        :immediate-check="false"
        v-model="loading"
        :finished="finished"
        @load="onLoad">
        <exhibition-list>
          <router-link
            v-for="(item, i) in list"
            :to="'/exhibitions/' + item.id"
            :key="i">
            <exhibition-item :model="item"/>
          </router-link>
        </exhibition-list>
      </van-list>
    </div>
    <create-exhibition-btn/>
  </layout>
</template>

<script>
import Layout from '@/components/Layout'
import ExhibitionListNavbar from '@/components/ExhibitionListNavbar'
import ExhibitionListFilter from '@/components/ExhibitionListFilter'
import ExhibitionListFilterTags from '@/components/ExhibitionListFilterTags'
import ExhibitionList from '@/components/ExhibitionList'
import ExhibitionItem from '@/components/ExhibitionItem'
import { mapState } from 'vuex'
import { getExhibitionList } from '@/api'
import CreateExhibitionBtn from '@/components/CreateExhibitionBtn'

export default {
  components: {
    Layout,
    ExhibitionListNavbar,
    ExhibitionListFilter,
    ExhibitionListFilterTags,
    ExhibitionList,
    ExhibitionItem,
    CreateExhibitionBtn
  },
  data () {
    return {
      filterTags: [],
      list: [],
      loading: false,
      finished: false,
      page: 1,
      total: 0,
      search: ''
    }
  },
  computed: mapState(['exhibitionListFilterOptions']),
  watch: {
    filterTags () {
      this.page = 1
      this.list = []
      this.$nextTick(() => {
        this.onLoad()
      })
    }
  },
  async created () {
    this.$store.dispatch('getExhibitionListFilterOptions')
    this.search = this.$route.query.search
    this.onLoad()
  },
  activated () {
    if (this.search !== this.$route.query.search) {
      this.search = this.$route.query.search
      this.page = 1
      this.list = []
      this.$nextTick(() => {
        this.onLoad()
      })
    }
  },
  methods: {
    filterSelected (value) {
      for (let [index, tag] of this.filterTags.entries()) {
        if (tag.type === value.type) {
          this.$set(this.filterTags, index, value)
          return
        }
      }
      this.filterTags.push(value)
    },
    async getExhibitionList (page, search, filter) {
      const { code, data } = await getExhibitionList({
        params: {
          type: 0,
          page,
          pageSize: 10,
          search,
          filter
        }
      })
      if (code === 1) {
        let rawData = data.list
        rawData = rawData.map((e) => {
          return {
            id: e.ex_id,
            title: e.ex_name,
            image: e.ex_logo,
            date: e.ex_time,
            location: e.ex_district
          }
        })
        return { list: rawData, total: data.totalSize }
      }
      return { list: [], total: 0 }
    },
    async onLoad () {
      let industry = this.filterTags.find(e => e.type === '按行业')
      industry = industry ? industry.value : industry
      let district = this.filterTags.find(e => e.type === '按地区')
      district = district ? district.value : district
      let date = this.filterTags.find(e => e.type === '按时间')
      date = date ? date.value : date

      let filter = {
        industry,
        district,
        date
      }

      if (!industry && !district && !date) {
        filter = undefined
      }

      const { list, total } = await this.getExhibitionList(this.page++, this.search, filter)
      this.total = total

      for (const item of list) {
        this.list.push(item)
      }
      this.loading = false
      if (this.list.length >= total) {
        this.finished = true
      }
    }
  }
}
</script>
